<template>
  <div class="model-container">
    <div class="listName">生成订单</div>

    <!--搜索-->
    <!--表格-->
    <el-card style="margin-top: 10px">

      <div slot="header" class="clearfix">
        <div>
          <el-button type="primary" plain @click="addOrder">新增商品</el-button>
          <el-input style="float: right;display: block;width: 200px" v-model="remake" size="small" type="text" placeholder="备注" maxlength="15"/>

          选择门店:<el-select  v-show="this.lable" v-model="menid" style="width: 300px" placeholder="请选择门店" @change='mesage'>
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="请添加商品" @selection-change="changeFun">

          <el-table-column align="center" prop="shopName" label="名称"/>

          <el-table-column align="center" prop="coding" label="编码"/>

          <el-table-column align="center" prop="specification" label="规格"/>

          <el-table-column align="center" prop="unit" label="单位" />

          <el-table-column align="center" prop="price" label="单价">
            <template slot-scope="scope"><span>{{scope.row.price}}元</span></template>
          </el-table-column>

          <el-table-column align="center" prop="quantity" label="数量" />

          <el-table-column v-if='label' align="center" prop="name" label="所属门店"/>

          <el-table-column align="center" label="操作" width="230px">
            <template slot-scope="scope">
              <el-button type="warning" plain @click="newdelete(scope.$index)">移除</el-button>
            </template>
          </el-table-column>

        </el-table>
<!--        :disabled="scope.row.documentsState>3"-->
<!--        @click="editshoporder(scope.row)"-->
        <!--分页-->
        <div slot="header" class="clearfix">
          <div class="btns-wrapper-left">
            <el-button type="success" style="float: right;margin-top: 10px" :disabled="this.subimt" plain @click="addShopOrder">生成订单</el-button>
          </div>
        </div>
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogState"
          :close-on-click-modal="false"
          :before-close="handleClose"
          top="5vh"
          width="40%">
          <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
            <div class="formBody">
              <el-form-item label="选择商品" prop="shopName">
                <el-select v-model="dialogBindData.nscid" placeholder="请选择" @change='getValue'>
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.shopName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单价" prop="price">
                <el-input :disabled="this.button" v-model="dialogBindData.price" size="small" type="number" placeholder="单价" maxlength="15"/>
              </el-form-item>
              <el-form-item label="数量" prop="quantity">
                <el-input  v-model="dialogBindData.quantity" size="small" type="number" min=1 placeholder="数量" maxlength="15"/>
              </el-form-item>
              <el-form-item label="编码" prop="coding">
                <el-input :disabled="this.button" v-model="dialogBindData.coding" size="small" type="text" placeholder="编码" maxlength="15"/>
              </el-form-item>
              <el-form-item label="单位" prop="unit">
                <el-input :disabled="this.button" v-model="dialogBindData.unit" size="small" type="text" placeholder="单位" maxlength="15"/>
              </el-form-item>
              <el-form-item label="规格" prop="specification">
                <el-input :disabled="this.button" v-model="dialogBindData.specification" size="small" type="text" placeholder="规格" maxlength="15"/>
              </el-form-item>
              <el-form-item v-show="label" label="所属门店" prop="name">
                <el-input :disabled="this.button" v-model="dialogBindData.name" size="small" type="text" placeholder="所属门店" maxlength="15"/>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="dialogBindData.remark" size="small" type="text" placeholder="备注" maxlength="15"/>
              </el-form-item>
            </div>
            <div class="btns-wrapper">
              <el-button size="small" @click="handleClose">取 消</el-button>
              <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">增加</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
    </el-card>


  </div>
</template>

<script>
  import * as commoditys from '../../api/commoditys'
  import * as userMessage from '../../utils/auth'
  import ImageCropper from '@/components/ImageCropper'
  import {isvalidNull, validatePhone} from "../../utils/validate";
  import * as member from "../../api/member";

  export default {
    components: {
      ImageCropper
    },
    data() {
      const quantity = (rule, value, callback) => {
        const r = /^\+?[1-9][0-9]*$/;
        if (!isvalidNull(value)) {
          callback(new Error('请输入商品数量'))
        } else if (!r.test(value)) {
          callback(new Error('请输入正确商品数量'))
        } else{
          callback()
        }
      }

      return {
        menid:'',
        lable:true,
        options1:'',
        remake:'',
        subimt:true,
        options:'',
        label:true,
        button:true,
        dialogTitle:'生成订单',
        sid:'',
        neid:'',
        number:0,
        // 页面搜索
        seacherParam: {
          searchMessage: ''
        },
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: [],
        datavalID: [],
        // 提交内容
        type: '',

        dialogBindData: {
          unit:'',
          coding:'',
          sid:'',
          remark:'',
          name:'',
          shopName:'',
          quantity:'',
          nscid:'',
          price:'',
        },
        rules: {
          nscid:[
            { required: true, message: '请选择商品', trigger: 'blur' },
          ],
          quantity: [
            { required: true, validator: quantity, trigger: 'blur' },
          ],
        },
        sc:'',
        // 上传头像
      }
    },
    computed: {

    },

    beforeMount() {
      this.getOrderList()
    },

    created() {
      this.initUploadFileurl()
    },
    methods: {
      addShopOrder(){
        var sys_user=JSON.parse(userMessage.getUserInformation());
        const param = {
          dataOption:this.dataOption,
          linkman:sys_user.realName,
          phone:sys_user.mobilePhone,
          remark:this.remark,
          site:sys_user.site,
          realName:sys_user.userName,
          sid:this.sid,
          id:sys_user.userId
        }
        commoditys.addOrderShop(param).then(res=>{
          this.$message({
            message: '增加成功',
            type: 'success'
          })
          this.$router.push({
            name: '/v1/shoporderlist',
          })
        })
      },
      newdelete(index){
        this.dataOption.splice(index,1)
        console.log(this.dataOption)
        if(this.dataOption.length===0){
          this.subimt=true
        }
      },
      initUploadFileurl() {
        this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
      },
      seachFun() {
        this.pageNo = 1
        this.pageSize = 10
        const url = this.searchData()
        this.getOrderList(url)
      },
      getOrderList() {
        var sys_user=JSON.parse(userMessage.getUserInformation());
        console.log(sys_user)
        if(!sys_user.neid||sys_user.neid==='1'){
          if(!sys_user.shopId){
            //alert("你是平台")
            if(sys_user.neid==='1'){
              member.selectByCId1().then(res=>{
                //console.log(res.data.data)
                this.options1= res.data.data
                this.menid=res.data.data[0].id
                this.sid=this.menid
                this.mesage()
              })
            }
          }else{
            this.label=false
            this.lable=false
            //alert("你是门店")
            this.sid=sys_user.shopId
            commoditys.newgetcommoditylist2(this.sid).then(res=>{
              console.log(res)
              this.options=res.data.data
              this.dialogBindData.nscid=res.data.data[0].id
              this.getValue()
            })
          }
        }else{
          //alert("你是企业")
          this.neid=sys_user.neid
          member.selectByCId(this.neid).then(res=>{
            //console.log(res.data.data)
            this.options1= res.data.data
            this.menid=res.data.data[0].id
            this.sid=this.menid
            this.mesage()
          })
          // commoditys.newgetcommoditylist3(this.sid).then(res=>{
          //   console.log(res)
          //   this.options=res.data.data
          //   this.dialogBindData.nscid=res.data.data[0].id
          //   this.getValue()
          // })
        }
      },
      mesage(){
        commoditys.newgetcommoditylist2(this.menid).then(res=>{
          console.log(res.data.data)
          if(res.data.data.length!==0) {
            this.options = res.data.data
            this.dialogBindData.nscid = res.data.data[0].id
            this.sid=this.menid
            this.getValue()
          }
        })
      },
      addOrder(){
        this.dialogBindData.remark=''
        this.dialogBindData.quantity=1
        this.dialogState = true
      },
      getValue(){
        console.log(this.options)
        for(var i=0;i<this.options.length;i++){
          if(this.options[i].id===this.dialogBindData.nscid){
            this.dialogBindData.price=this.options[i].price
            this.dialogBindData.coding=this.options[i].coding
            this.dialogBindData.unit=this.options[i].unit
            this.dialogBindData.specification=this.options[i].specification
            this.dialogBindData.name=this.options[i].name
            break
          }
        }
      },
      // 编辑
      edit(data) {
        this.vipValue='0';
        //console.log(memberVip)
        //this.vipValue=this.sc.data.cardId
        console.log(this.vipValue)
        this.sourceShow=true
        this.createTimeShow=true
        this.updateTimeShow=false
        this.creatorShow=true
        this.dialogState = true
        this.dialogBindData.nmId = data.nmId
        if (data.picUrl === null || data.picUrl === '' || data.picUrl === undefined) {
          this.picUrl = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
        } else {
          this.picUrl = data.picUrl
        }
        this.reBindData(data)
      },
      submmitFun(){
        this.$refs.dialogBindData.validate((valid) => {
          if(valid) {
            const param = {
              unit:this.dialogBindData.unit,
              specification:this.dialogBindData.specification,
              coding:this.dialogBindData.coding,
              sid:this.dialogBindData.sid,
              remark:this.dialogBindData.remark,
              name:this.dialogBindData.name,
              shopName:this.dialogBindData.shopName,
              quantity:this.dialogBindData.quantity,
              nscid:this.dialogBindData.nscid,
              price:this.dialogBindData.price,
            }
            for(var j=0;j<this.options.length;j++){
              if(param.nscid===this.options[j].id){
                param.shopName=this.options[j].shopName
                break
              }
            }
            var run=true
            for(var i=0;i<this.dataOption.length;i++){
              if(this.dataOption[i].nscid===param.nscid){
                param.quantity=parseInt(this.dataOption[i].quantity)+parseInt(param.quantity)+'';
                this.$set(this.dataOption,i,param)
                run=false
                break
              }
            }
            if(run){
              this.dataOption.push(param)
            }
            this.dialogState=false
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.subimt=false
          }
        })
      },
      changeFun(data) {
        this.datavalID = data

      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 搜索过滤
      searchData() {
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        return url
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getOrderList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getOrderList()
      },
      handleClose() {
        this.dialogState = false
      },
      // 上传头像
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.picUrl = resData.data[0].maxImageUrl
      },
      close() {
        this.imagecropperShow = false
      },

    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
